<template>
    <div>
        <el-table :data="permissionData" row-key="id" border default-expand-all>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="code" label="权限值" />
            <el-table-column prop="updateTime" label="修改时间" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="row.level === 4"
                        @click="addPermisstion(row)"
                    >
                        {{ row.level === 3 ? '添加功能' : '添加菜单' }}
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        :disabled="row.level === 1"
                        @click="updatePermisstion(row)"
                    >
                        编辑
                    </el-button>

                    <el-popconfirm
                        width="250px"
                        :title="`您确定要删除${row.name}吗？`"
                        @confirm="removeMenu(row.id)"
                    >
                        <template #reference>
                            <el-button type="danger" size="small" :disabled="row.level === 1">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" :title="savePermissionData.id ? '更新菜单' : '添加菜单'">
            <el-form>
                <el-form-item label="名称">
                    <el-input
                        placeholder="请你输入菜单名称"
                        v-model="savePermissionData.name"
                    ></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-input
                        placeholder="请你输入权限数值"
                        v-model="savePermissionData.code"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { reqAllPermisstion, reqRemoveMenu, reqAddOrUpdateMenu } from '@/api/acl/menu'

const permissionData = ref([])

const getPermissionList = async () => {
    let result: any = await reqAllPermisstion()
    if (result.code === 200) {
        permissionData.value = result.data
    }
}

onMounted(() => {
    getPermissionList()
})

const dialogVisible = ref<boolean>(false)

const savePermissionData = reactive({
    code: '',
    level: 0,
    name: '',
    pid: 0,
    id: 0,
})

const addPermisstion = (row: any) => {
    Object.assign(savePermissionData, {
        id: 0,
        code: '',
        level: 0,
        name: '',
        pid: 0,
    })
    dialogVisible.value = true
    savePermissionData.level = row.level + 1
    savePermissionData.pid = row.id as number
}

const updatePermisstion = (row: any) => {
    dialogVisible.value = true
    Object.assign(savePermissionData, row)
}

const save = async () => {
    let result: any = await reqAddOrUpdateMenu(savePermissionData)
    if (result.code === 200) {
        dialogVisible.value = false
        ElMessage({ type: 'success', message: savePermissionData.id ? '更新成功' : '添加成功' })
        getPermissionList()
    }
}

const removeMenu = async (id: number) => {
    let result = await reqRemoveMenu(id)
    if (result.code === 200) {
        ElMessage({ type: 'success', message: '删除成功' })
        getPermissionList()
    }
}
</script>

<style lang="scss" scoped></style>
